<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="chili-1.7.pack.js"></script>
<script type="text/javascript" src="jquery.easing.1.1.1.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx : 'cover'
	})
});
</script>
<script type="text/javascript">
$('<img />')[0].src = 'images/beach1.jpg';
$('<img />')[0].src = 'images/beach2.jpg';
$('<img />')[0].src = 'images/beach3.jpg';
$('<img />')[0].src = 'images/beach4.jpg';
$('<img />')[0].src = 'images/beach5.jpg';
$('<img />')[0].src = 'images/beach6.jpg';
$('<img />')[0].src = 'images/beach7.jpg';
$('<img />')[0].src = 'images/beach8.jpg';
$('<img />')[0].src = 'images/beach9.jpg';

$(function() {
	var fx,	cbox = $('input:checkbox').click(start)[0];
	$('#choices li').click(function() {
		fx = $.trim($(this).text());
		start();
	});
	
	var markup = '<div id="slideshow">'
		+ '<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg"><img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"><img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg">'
		+ '<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg"><img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg"><img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg">'
		+ '<img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg"><img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg"><img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg">'
		+ '</div>';
	
	// reset lại Slide Show
	function start() {
		$('#slideshow').cycle('stop').remove();
        $('#show').append(markup);
		$('#effect').html(fx);
		$('#slideshow').cycle({
			fx: fx,
			timeout: 2000,
			delay:  -1000,
			after: onAfter,
			sync: !!cbox.checked
		});
	}

	function onAfter(curr,next,opts) {
		var msg = 'Slide ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
		$('#caption').html(msg);
	};

});

</script>

</head>

<body>
<div><a id="logo" href="http://jquery.com" title="Powered By jQuery"></a></div>
<div id="main">
	<table><tr><td>
		<ul id="choices">
		    <li>blindX</li>
		    <li>blindY</li>
		    <li>blindZ</li>
		    <li>cover</li>
		    <li>curtainX</li>
		    <li>curtainY</li>
		    <li>fade</li>
		    <li>fadeZoom</li>
		    <li>growX</li>
		    <li>growY</li>
		    <li>none</li>
		    <li>scrollUp</li>
		    <li>scrollDown</li>
		    <li>scrollLeft</li>
		    <li>scrollRight</li>
		    <li>scrollHorz</li>
		    <li>scrollVert</li>
		    <li>shuffle</li>
		    <li>slideX</li>
		    <li>slideY</li>
		    <li>toss</li>
		    <li>turnUp</li>
		    <li>turnDown</li>
		    <li>turnLeft</li>
		    <li>turnRight</li>
		    <li>uncover</li>
		    <li>wipe</li>
		    <li>zoom</li>
		</ul>

		Toggle the sync option to see how some effects behave<br>differently (such as blind, curtain, and zoom).<br>

		<input type="checkbox" checked="checked" /> sync: true

	</td><td>

		<h1 id="effect">Click an effect name at the left</h1>

        <div id="show"></div>

		<div id="caption" style="text-align:center"></div>

	</td></tr></table>

</div>

    

</body>
</html>
